
<script type="text/javascript">
	$(document).ready(function() {
		$("#main-nav li ul").hide(); // Hide all sub menus
		$("#main-nav li a.current").parent().find("ul").slideToggle("slow"); // Slide down the current menu item's sub menu

		$("#main-nav li a.nav-top-item").click( // When a top menu item is clicked...
		function() {
			$(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked
			$(this).next().slideToggle("normal"); // Slide down the clicked sub menu
			return false;
		});

		$("#main-nav li .nav-top-item").hover(function() {
			$(this).stop().animate({
				paddingRight : "25px"
			}, 200);
		}, function() {
			$(this).stop().animate({
				paddingRight : "15px"
			});
		});
	});
</script>

<ul id="main-nav">
	<!-- Accordion Menu -->	
	<li><a href="#" class="nav-top-item"> <!-- Add the class "current" to current menu item -->
			Categories </a>
		<ul>
			<li><a href="#"> Create a new Category </a>
			</li>
			<li><a href="#">Manage Categories</a>
			</li>
			<!-- Add class "current" to sub menu items also -->
		</ul></li>
	<li><a href="#" class="nav-top-item current">Products</a>
		<ul>
			<li><a href="ManageProduct.jsp" class="current">Manage products</a>
			</li>
			<li><a href="#">Search products</a>
			</li>
		</ul></li>
	<li><a href="#" class="nav-top-item">Customers</a>
		<ul>
			<li><a href="ManageCustomer.jsp">Manage customers</a>
			</li>
			<li><a href="#">Calendar Settings</a>
			</li>
		</ul></li>
	<li><a href="#" class="nav-top-item"> Employees </a>
		<ul>
			<li><a href="#">Manage employees</a>
			</li>
			<li><a href="#">Add new employee</a>
			</li>
		</ul></li>
	<li><a href="#" class="nav-top-item"> Orders </a>
		<ul>
			<li><a href="#">Manage orders</a>
			</li>
			<li><a href="#">Statistic orders</a>
			</li>
		</ul></li>
	<li><a href="#" class="nav-top-item"> Settings </a>
		<ul>
			<li><a href="#">Your Profile</a>
			</li>
			<li><a href="#">Users and Permissions</a>
			</li>
		</ul></li>
</ul>
<!-- End #main-nav -->